<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

<style>
    #layui-laypage-1 .layui-laypage-limits {
        display: none;
    }
</style>
</head>

<body>
<!--杆塔管理列表页面-->
<div style="margin-bottom: 5px;">

<!--查询模块-->
    <form class="layui-form" style="padding-top:50px" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请选择线路</label>
                <div class="layui-input-inline">
                    <select name="lineId" id="lineId" lay-verify="required" lay-filter="xmFilter">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">请选择状态</label>
                <div class="layui-input-inline">
                    <select name="isStart" lay-filter="xmFilter">
                        <option value="">直接选择</option>
                        <option value="0">停用</option>
                        <option value="1">启用</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline" >
                <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
            </div>
        </div>
    </form>
<!--新增按钮-->
    <div style="text-align:right;width:96.8%">
        <div class="layui-form-item">
            <a>
                <button id="add" onclick="poleadd()" class="layui-btn" style="margin-right:200px;background-color: #93D1FF">
                    <i class="layui-icon" >添加&#xe654;</i>
                </button>
            </a>
        </div>
    </div>
<!--杆塔管理列表模块-->
    <table class="layui-table" lay-data="{width: 805,height:250, url:'/pole/list', page:true,limit:3, id:'test'}" lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{field:'poleCode', width:200, sort: true}">杆塔编号</th>
            <th lay-data="{field:'lineName', width:200}">所属线路</th>
            <th lay-data="{field:'isStartStr', width:200, sort: true}">状态（启用/停止）</th>
            <th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['table', 'layer', 'form', 'laypage', 'laydate'], function () {
            var table = layui.table //表格
                ,layer = layui.layer //弹层
                ,form = layui.form //form表单
            //线路选择添加到下拉框中
            $.ajax({
                url: '/pole/lineList',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $.each(data, function (index, item) {
                        $('#lineId').append(new Option(item.lineName, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            });

            //监听提交 lay-filter="search"
            form.on('submit(search)', function(data){
                var formData = data.field;
                var lineId = formData.lineId;
                var isStart = formData.isStart;
                url=formData.url;
                icon=formData.icon;
                parent_id=formData.parent_id;
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {//这里传参  向后台
                        lineId: lineId,
                        isStart: isStart
                        //可传多个参数到后台...  ，分隔
                    }
                    , url: '/pole/list'//后台做模糊搜索接口路径
                    , method: 'post'
                });
                return false;//false：阻止表单跳转  true：表单跳转
            });

            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                console.log("id:"+data.id)
                if(obj.event === 'del'){
                    layer.confirm('真的删除么', function(index){
                        $.ajax({
                            type:"POST",
                            url:'/pole/del?id='+data.id,
                            async: false, //改为同步请求
                            contentType:'application/json;charset=UTF-8',
                            dataType:'json',
                            success:function(data){
                                if(data){
                                    obj.del();
                                    layer.close(index);
                                    layer.msg('删除成功', { icon: 6 });
                                }else{
                                    layer.msg('删除失败', { icon: 2 });
                                }
                            },
                            error:function () {
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        content: ["/pole/pole_edit?id="+data.id],   //添加页，后台controller转发到指定页
                        area: ["300px", "300px"],
                        title: ['修改杆塔'],
                        fixed: false,
                        //maxmin: true,
                        shadeClose: true,
                        end: function () {  //刷新页面
                            // location.reload();
                            table.reload('test', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                },
                                url: '/pole/list', //后台做模糊搜索接口路径
                                method: 'post'
                            });
                        }
                    })
                }
            });
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        //添加
        function poleadd() {
            console.log($('#lineId').val())
            if($('#lineId').val()===""){
                layer.msg('请选择路线');
                return
            }
            layui.use('layer', function () {
                layer.open({
                    type: 2,
                    content: ["/pole/pole_add?lineId="+$('#lineId').val()],   //添加页，后台controller转发到指定页
                    area: ["300px", "300px"],
                    title: ['添加杆塔'],
                    fixed: false,
                    //maxmin: true,
                    shadeClose: true,
                    end: function () {  //刷新页面
                        location.reload();
                    }
                })
            })
        }


    </script>

</body>
</html>